<template>
    <div>
        <div id="gate" class="CommonStyles">大门管理</div>
        <div id="top">
            <div id="topLeft">
                <!-- 时间选择 -->
                <div class="block CommonStyles">
                    <span class="demonstration">时间：</span>
                    <el-date-picker v-model="value1" type="datetimerange" range-separator="到" start-placeholder="开始日期"
                        end-placeholder="结束日期" clear-icon="el-input__icon el-range__icon el-icon-time">
                    </el-date-picker>
                </div>
                <!-- 选择 -->
                <div class="CommonStyles">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>

            </div>
            <!-- 右边 -->
            <div id="topright" class="CommonStylesa">

                <el-button type="primary" size="medium" @click="postData">点击开门</el-button>
                <el-button type="info" size="medium" @click="getDataOne">查询</el-button>

            </div>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%;">
                <el-table-column prop="openTime" label="开门时间" width="180">
                </el-table-column>
                <el-table-column prop="manner" label="开门方式" width="180">
                </el-table-column>
                <el-table-column prop="tel" label="开门人联系方式">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            options: [{
                value: 3,
                label: '全部'
            }, {
                value: 0,
                label: '自习室内开门'
            }, {
                value:1,
                label: '扫码开门'
            }, {
                value: 2,
                label: '后台开门'
            }],
            value: '',
            tableData: []
        };
    },
    methods: {
        getData: function () {
            this.$axios({
                url: '/door/query',
                methods: 'get'
            }).then((res) => {
                if (res.data.code == 0) {
                    this.tableData=res.data.data.list;
                } else {
                }
            })
        },
        postData: function () {
            this.$axios({
                url: '/Door/add',
                method: 'post',
                data:{
                    manner:0,
                }
            }).then((res) => {
                if (res.data.code == 0) {
                    console.log(res)
                } else {
                }
            })
        },
        getDataOne: function () {
            this.$axios({
                url: '/door/query',
                methods: 'get',
                params:{
                    page:1,
                    limit:5,
                    manner:this.value
                }
            }).then((res) => {
                if (res.data.code == 0) {
                    this.tableData=res.data.data.list;
                } else {
                }
            })
        },

    },
    mounted: function () {
        this.getData()

    }
};
</script>
  
<style lang="less" scoped>
.CommonStyles {
    text-align: left;
    line-height: 0px;
    padding: 0px;
}

.CommonStylesa {
    text-align: right;
    line-height: 0px;
    padding: 0px;
}

#gate {
    font-size: 20px;
}

#top {
    margin-top: 20px;
    width: 1150px;
    height: 64px;
    background: #d7d7d7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#topLeft {
    display: flex;
    width: 800px;
    justify-content: space-around;
    align-items: center;
}

#topright {
    display: flex;
    justify-content: space-around;
    width: 300px;
}
</style>
  